<template>
  <div class="main">
    <div class="left" :style="{backgroundColor:themeColor}">
      <div class="logo">Kangaroo</div>
      <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          :background-color=themeColor
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          router
          :collapse="collapseFlag"
          :collapse-transition='false'>
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-time"></i>
            <span>定时任务</span>
          </template>
          <el-menu-item index="/waitJobs"><i class="el-icon-tickets"></i>未跑任务</el-menu-item>
          <el-menu-item index="/finishJobs"><i class="el-icon-folder-checked"></i>已跑任务</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-grid"></i>
            <span>选择主题</span>
          </template>
          <el-menu-item
              :index="item.name"
              v-for="(item,index) in theme"
              :key="index"
              @click="changeThemeColor(item.value)">
            {{ item.name }}
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>
    <div class="right">
      <div class="nav" :style="{backgroundColor:themeColor}">
        <div class="collapse" @click="collapseFlag = !collapseFlag">
          <span class="el-icon-s-fold"></span>
        </div>
      </div>
      <div class="content">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: "Layout",
  methods: {
    changeThemeColor(color) {
      this.themeColor = color
    }
  },
  data() {
    return {
      themeColor: '#101f30',
      collapseFlag: false
    }
  },
  computed: {
    ...mapState('theme', ['theme'])
  }
}
</script>

<style scoped>

.el-menu {
  border-right-width: 0;
}

.main {
  width: 100vw;
  height: 100vh;
  display: flex;
}

.left {
  width: 200px;
}

.right {
  flex: 1;
}

.logo {
  width: 90%;
  color: white;
  font-size: 18px;
  text-align: center;
  padding: 8px 0;
  border: 1px solid #ccc;
  margin: 10px auto;
}

.nav {
  display: flex;
  height: 58px;
  align-items: center;
}

.collapse{
  display: flex;
  height: 80%;
  width: 50px;
  justify-content: center;
  align-items: center;
  margin-left: 5px;
  background: #cccccc;
}

.collapse span{
  font-size: 20px;
}

.content{
  width: 100%;
  height: 100%;
}
</style>
